{extend name="base/basic" /}
{block name="title"} 首页 {/block}
<!-- Page Content -->
{block name="content"}

<div style="padding-top: 11px">
<!--  头部工具-->
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">添加管理员</button>
      <button class="layui-btn layui-btn-sm" onclick="javascript:window.location.reload();" lay-event="">刷新</button>
    </div>
  </script>
  <!--  头部工具-->

  <!-- 表格容器-->
  <table id="myTable" lay-filter="myTable" class="layui-tab" lay-even lay-skin="line" lay-size="lg"></table>
  <!-- 表格容器-->


<!-- 状态模板 -->
  <script type="text/html" id="buttonTpl">
    {{#  if(d.state == 1){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">禁用</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="check">开启</a>
    {{#  } }}
  </script>
  <!-- 状态模板 -->


<!--  行工具按鈕-->
  <script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <!--  行工具按鈕-->
</div>
<!-- /Page Content -->
{/block}
{block name="js"}

<script>
  layui.use('table', function(){
    var table = layui.table;
    var layer = layui.layer;
    var $     = layui.jquery;
    //表格初始化
    table.render({
      elem: '#myTable'
      ,even:true
      ,toolbar:  "#toolbarDemo" // 头部工具栏
      ,defaultToolbar:["filter","exports"] //["filter","exports","print"]
      ,url: "{:url('listData')}"//数据接口
      ,page: true //开启分页
      ,cols: [[ //表头
        {field:  'id', title: 'ID', width:80,fixed: 'left'}
        ,{field: 'name', title: '用户名'}
        ,{field: 'role_name', title: '所属角色'}
        ,{field: 'add_time', title: '创建时间'}
        ,{field: 'state',align: "center", title: '账号状态',toolbar:'#buttonTpl'}
        ,{field: 'login_ip', title: '最后登录IP'}
        ,{field: 'login_time', title: '最后登录时间'}
        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
      ]]
      ,text: {
        none: '暂无相关数据' //默认：无数据。
      }
    });

    //头部按钮事件
    table.on('toolbar(myTable)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          layer.open({
            type: 2, // 类型
            id:'add',
            anim:4, // 弹出动画 1-6
            maxmin:true, // 最大最小化
            offset: 'auto', // 坐标
            title:'添加管理员',
            area: ['500px', '400px'], // 宽高
            shadeClose:true, // 是否点击遮罩关闭
            content: "{:url('addView')}" //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
          });
          break;
        case 'delete':
          // layer.msg('删除');
          break;
        case 'update':
          // layer.msg('编辑');
          break;
      };
    });

    //行工具条事件
    table.on('tool(myTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      console.log(data)
      if(layEvent === 'detail'){ //授权
        // do something
      } else if(layEvent === 'del'){ //删除
        layer.alert('您确定要删除操作吗?', {
          skin: 'layui-layer-molv' //样式类名 自定义样式
          ,title:'删除'
          , closeBtn: 1 // 是否显示关闭按钮
          , anim: 1 //动画类型
          , btn: ['确定', '取消'] //按钮
          , icon: 6 // icon
          , yes: function () {
            $.ajax({
              type: "POST",
              url: "{:url('del')}",
              data: { id: data.id },
              success: function (e) {
                if(e.code == 1){
                  layer.msg(e.msg,{icon:6,time:2000},function (){
                    obj.del()
                  },1000)
                }else{
                  layer.msg(e.msg,{icon:5,time:2000},function (){
                    location.reload()
                  })
                }
              }
            }) //ajax结束
          }
          , btn2: function () {
            console.log('取消啥也不干')
          }
        });
      } else if(layEvent === 'edit'){ //编辑
        layer.open({
          type: 2, // 类型
          id:'add',
          anim:4, // 弹出动画 1-6
          maxmin:true, // 最大最小化
          offset: 'auto', // 坐标
          title:'编辑',
          area: ['500px', '500px'], // 宽高
          shadeClose:true, // 是否点击遮罩关闭
          content: "{:url('editView')}?id="+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
        //同步更新缓存对应的值
        obj.update({
          // status: data.status
          title:data.title
        });
      } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
      }
    });
  });
</script>

{/block}